﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMenu#templates">
    <CodeSnippetTabPage Text="Razor">@(
    @"
<DxMenu Orientation=""Orientation.Horizontal""
        DropDownActionMode=""MenuDropDownActionMode.Click""
        DisplayMode=""MenuDisplayMode.Desktop""
        CollapseItemToIconMode=""MenuCollapseItemToIconMode.All"">
    <Items>
        <DxMenuItem Text=""Home"" IconCssClass=""menu-icon-home menu-icon"">
            <Items>
                <DxMenuItem Text=""News"">
                    <Items>
                        <DxMenuItem Text=""Explore our newest features"" />
                        <DxMenuItem Text=""Website news"" />
                    </Items>
                </DxMenuItem>
                <DxMenuItem Text=""Our Mission"" />
                <DxMenuItem Text=""Our Customers"" />
            </Items>
        </DxMenuItem>
        <DxMenuItem Text=""Components"" IconCssClass=""menu-icon-products menu-icon"">
            <Items>
                <DxMenuItem Text=""Blazor"" />
                <DxMenuItem Text=""ASP.NET MVC"" />
                <DxMenuItem Text=""ASP.NET Web Forms"" />
                <DxMenuItem Text=""ASP.NET Core"" />
                <DxMenuItem Text=""Bootstrap Web Forms"" />
            </Items>
        </DxMenuItem>
        <DxMenuItem Text=""Support"" IconCssClass=""menu-icon-support menu-icon"">
            <Items>
                <DxMenuItem Text=""Getting Started"" />
                <DxMenuItem Text=""Documentation"" />
                <DxMenuItem Text=""Support Center"" />
                <DxMenuItem Text=""Code Examples"" />
                <DxMenuItem Text=""Blogs"" />
            </Items>
        </DxMenuItem>
        <DxMenuItem CssClass=""ml-auto"">
            <Template>
                <div class=""search dxbs-textbox"">
                    <input type=""text"" class=""dx-demo-menu-input form-control form-control-sm"" placeholder=""Search..."">
                    <span class=""dx-demo-menu-search-button dxbs-feedback"">
                        <span class=""d-flex pl-2 pr-2"" role=""button"" style=""color:gray"">
                            <span class=""tb-icon tb-icon-search""></span>
                        </span>
                    </span>
                </div>
            </Template>
        </DxMenuItem>
        <DxMenuItem CssClass=""notoggle"">
            <TextTemplate>
                <div class=""menu-icon-user-profile menu-icon"" />
            </TextTemplate>
            <SubMenuTemplate>
                <div class=""w-100 user-profile"">
                    <div class=""flex-column align-items-center justify-content-center"">
                        <div class=""logo-container d-flex align-items-center justify-content-center"">
                            <div class=""menu-icon-user-profile menu-icon menu-icon-large"" />
                        </div>
                        <div class=""user-name-container bm-3 mb-2"">
                            <div class=""user-name-title text-muted text-center"">User Name</div>
                            <div class=""user-name text-center"">John Heart</div>
                        </div>
                        <div class=""d-flex justify-content-center log-off-btn"">
                            <DxButton Text=""Log Off"" RenderStyle=""@ButtonRenderStyle.Secondary""></DxButton>
                        </div>
                    </div>
                </div>
            </SubMenuTemplate>
        </DxMenuItem>
    </Items>
</DxMenu>")
    </CodeSnippetTabPage>
    <CodeSnippetTabPage Language="CSS" Text="CSS">
        @(
    @".dx-menu-item.notoggle > a > .dropdown-toggle {
    display: none;
}

.dx-menu-item.notoggle > .dropdown-menu {
    transform: matrix(1, 0, 0, 1, -112, -1) !important;
}

.dxbs-menu-item-tmpl > .search {
    padding: 0.25rem;
    position: relative;
}

.dxbs-menu-item-tmpl .user-profile .logo-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.dxbs-menu-item-tmpl .user-profile .log-off-btn {
    padding-top: 0.815rem;
    padding-bottom: 0.815rem;
    border-top: 1px solid #e5e5e5;
}
.dxdemo-color-gray {
    color: gray;
}
@media (max-width: 655px) {
    .dx-menu-item > .search {
        width: 135px
    }
}")
    </CodeSnippetTabPage>

</CodeSnippetTabbed>
